<template>
	<view :class="[primarySize()]">
		<form>
			<view class="page-foot bg-white">
				<view class="p30">
					<!-- <view class="flex-box flex-center mb30 fs28" @click="bindAgree">
						<image class="icon_check" :src="agree?iconPath('choose_sc.png'):iconPath('choose_uc.png')"
							mode="aspectFit"></image>
						<view class="col9">我已阅读并同意<text class="col4"
								@click.stop="onSinglepage('service')">《服务协议》</text>和<text class="col4"
								@click.stop="onSinglepage('secret')">《隐私政策》</text>
						</view>
					</view> -->
					<view class="flex-box" :hidden="step!=1">
						<button @click="bindNext" hover-class="none"
							class="btn4 flex-grow-1">继续完善</button>
						<button @click="bindSubmitStep1" hover-class="none"
							class="btn5 ml30 flex-grow-1">提交</button>
					</view>
					<view class="flex-box" :hidden="step!=2">
						<button @click="bindPrev" hover-class="none" class="btn4 flex-grow-1">上一步</button>
						<button @click="bindSubmitStep2" hover-class="none"
							class="btn5 ml30 flex-grow-1">提交</button>
					</view>
				</view>
			</view>
			<view class="container">
				<view class="resume_tit flex-box jc">完善：已完成{{progress.calcInfoComplete(info)}}%
					<view hover-class="none" class="ml20" v-if="userinfo.group_id==2&&auditStatus=='1'"
						@click="bindPreviewCompany">预览企业主页 ></view>
				</view>
				<view class="p30 bg-white">
					<view class="fs38 col3">编辑公司信息</view>
					<view class="fs24 col9 pt20">
						<view>您的公司的主页内容已全部填写完成，可以随时进行优化，为你的职位带来更多查看与沟通.
						</view>
						<view>完善的企业主页内容，为你的职位带来更多查看与沟通.</view>
					</view>
					<view class="flex-box pt20 fs26">
						<view class="col9 flex-grow-1">完善程度</view>
						<view class="colmain">{{progress.calcInfoComplete(info)}}%</view>
					</view>
					<view class="progress_main">
						<view class="progress_con" :style="{'width':progress.calcInfoComplete(info)+'%'}"></view>
					</view>
				</view>

				<view class="info_main" :hidden="step!=1">
					<view class="box1 flex-box " @click="uploadLogo">
						<view class="flex-grow-1 col3">logo</view>
						<input hidden name="logo" :value="info.logo" />
						<image v-if="info.logo" class="logo" :src="info.logo" mode="widthFix"></image>
						<view v-else class="col9">请上传</view>
						<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="aspectFit" class="arrow-r ml10"></image>
					</view>

					<view class="box2">
						<view class="info_item flex-box">
							<view>企业名称</view>
							<input type="text" data-name="company_name" name="company_name" :value="info.company_name"
								@input="bindInput" maxlength="40" class="flex-grow-1 tr" placeholder="请填写"
								placeholder-class="col9"></input>
						</view>
						<multi-select class="info_item" :items="cities" @change="bindCityChange" id_key="id"
							:max_level="2" name_key="name" :value="info.city_id">
							<input hidden name="city_id" :value="info.city_id" />
							<view class="info_item flex-box">
								<view>所在城市</view>
								<view class=" flex-grow-1 tr" :class="[favAreaName?'picker':'col9']">
									{{favAreaName?favAreaName:'请选择'}}
								</view>
								<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="aspectFit" class="arrow-r"></image>
							</view>
						</multi-select>


						<view class="info_item flex" style="height: auto;padding: 30rpx 0;line-height: 34rpx;">
							<view>公司地址</view>
							<textarea auto-height @click="bindCompanyAddress" data-name="address" name="address"
								:value="info.address" @input="bindInput" class="flex-grow-1 tr pl30" placeholder="请填写"
								placeholder-class="col9"></textarea>
							<!-- <input @click="bindCompanyAddress" type="text" data-name="address" name="address" :value="info.address" @input="bindInput" class="flex-grow-1 tr" placeholder="请填写" placeholder-class="col9"></input -->
						</view>
						<multi-select class="info_item" :items="industryCategories" :value="info.industry_category_id"
							@change="bindIndustryCategoryChange">
							<input hidden name="industry_category_id" :value="info.industry_category_id" />
							<view class="info_item flex-box">
								<view>所属行业</view>
								<view class=" flex-grow-1 tr"
									:class="[getListItemById(industryCategories,info.industry_category_id)?'picker':'col9']">
									{{getListItemAttrById(industryCategories, info.industry_category_id, 'name', '请选择')}}
								</view>
								<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="aspectFit" class="arrow-r"></image>
							</view>
						</multi-select>
						<multi-select class="info_item" :items="companyTypes" :value="info.company_type_id"
							@change="bindCompanyTypeChange">
							<input hidden name="company_type_id" :value="info.company_type_id" />
							<view class="info_item flex-box">
								<view>公司性质</view>
								<view class=" flex-grow-1 tr"
									:class="[getListItemById(companyTypes,info.company_type_id)?'picker':'col9']">
									{{getListItemAttrById(companyTypes, info.company_type_id, 'name', '请选择')}}
								</view>
								<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="aspectFit" class="arrow-r"></image>
							</view>
						</multi-select>
						<multi-select class="info_item" :items="companyScales" :value="info.company_scale_id"
							@change="bindCompanyScaleChange">
							<input hidden name="company_scale_id" :value="info.company_scale_id" />
							<view class="info_item flex-box">
								<view>公司规模</view>
								<view class=" flex-grow-1 tr"
									:class="[getListItemById(companyScales,info.company_scale_id)?'picker':'col9']">
									{{getListItemAttrById(companyScales, info.company_scale_id, 'name', '请选择')}}
								</view>
								<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="aspectFit" class="arrow-r"></image>
							</view>
						</multi-select>

						<view class="info_item flex-box">
							<view>联系人</view>
							<input maxlength="20" type="text" data-name="contact_person" name="contact_person"
								:value="info.contact_person" @input="bindInput" class="flex-grow-1 tr" placeholder="请填写"
								placeholder-class="col9"></input>
						</view>
						<view class="info_item flex-box">
							<view>联系电话</view>
							<input type="text" data-name="contact_phone" name="contact_phone"
								:value="info.contact_phone" maxlength="11" @input="bindInput" class="flex-grow-1 tr"
								placeholder="请填写" placeholder-class="col9"></input>
						</view>
						<view class="info_item flex-box">
							<view>联系邮箱</view>
							<input type="text" data-name="contact_email" name="contact_email"
								:value="info.contact_email" class="flex-grow-1 tr" @input="bindInput" placeholder="请填写"
								placeholder-class="col9"></input>
						</view>
					</view>

					<view class="box2">
						<view class="fs26 col3 pt20">营业执照</view>
						<view @click="uploadLicense">
							<input hidden name="license_img" :value="info.license_img" />
							<image class="license_img"
								:src="info.license_img?info.license_img:'https://admin.mosizp.cn/static/public/upload_null.png'"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view class="info_main" :hidden="step!=2">
					<view class="box2">
						<view @click="bindEditLabel" class="flex-box info_item">
							<view class="">展示标签</view>
							<view class="flex-grow-1 tr col0">{{info.benefits.length>0?'已添加':'未添加'}}</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" class="arrow-r"></image>
						</view>
						<view @click="bindEditIntro" class="flex-box info_item">
							<view class="">公司简介</view>
							<view class="flex-grow-1 tr col0">{{info.intro?'已添加':'未添加'}}</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" class="arrow-r"></image>
						</view>
						<view @click="bindEditEnvironmentImages" class="flex-box info_item">
							<view class="">公司环境</view>
							<view class="flex-grow-1 tr col0">已添加{{info.environment_images.length}}张</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" class="arrow-r"></image>
						</view>
					</view>
				</view>
				<view class="pb40"></view>
			</view>

		</form>
	</view>
</template>

<script>
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	var progress = require("../../xilu/enterprise_audit.js");
	const app = getApp();
	export default {
		components: {
			multiSelect
		},
		data() {
			return {

				x: 10,
				userinfo: {},
				auditStatus: 0,
				user: {},
				industryCategories: [],
				step: 1,
				index: 0,
				logo: '',
				license_type: null,
				license_types: ['永久', '日期选择'],
				cities: [],
				companyTypes: [],
				companyScales: [],
				info: {
					benefits: [],
					environment_images: []
				},
				favAreaName: null,
				progress,
				agree: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			let that = this;
			this.$core.get({
				url: '/xilujob.enterprise/info',
				success: ret => {
					let info = ret.data.enterprise_info,
						auditStatus = ret.data.audit_status;
					info.environment_images = info.environment_images ? info.environment_images.split(
						',') : [];
					that.user = ret.data.user;
					that.info = info;
					that.logo = info.logo;
					that.auditStatus = auditStatus;
					that.favAreaName = ret.data.fav_area_name;
				}
			});
			this.$util.getCities(false).then(cities => {
				this.cities = cities;
			});

			this.$util.getCompanyTypes().then(types => {
				this.companyTypes = types;
			});
			this.$util.getCompanyScales().then(scales => {
				this.companyScales = scales;
			})
			this.$util.getIndustryCategories().then(items => {
				this.industryCategories = items;
			});
			this.userinfo = this.$core.getUserinfo(true);
		},
		methods: {
			bindAgree() {
				this.agree = !this.agree
			},
			bindInput(e) {
				let name = e.currentTarget.dataset.name;
				this.info[name] = e.detail.value;
			},
			//城市
			bindCityChange(event) {
				this.favAreaName = event.items.map(item => item.name).join(',');
				let selectedCity = event.items[1];
				this.info.city_id = selectedCity.id;
				this.$forceUpdate();
			},
			//行业
			bindIndustryCategoryChange(event) {
				let selectedIndustryCategory = event.items[0];
				this.info.industry_category_id = selectedIndustryCategory.id;
				this.$forceUpdate();
			},
			//性质
			bindCompanyTypeChange(event) {
				let selectedCompanyType = event.items[0];
				this.info.company_type_id = selectedCompanyType.id;
				this.$forceUpdate();
			},
			//规模
			bindCompanyScaleChange(event) {
				let selectedCompanyScale = event.items[0];
				this.info.company_scale_id = selectedCompanyScale.id;
				this.$forceUpdate();
			},
			uploadLogo() {
				uni.chooseImage({
					count: 1,
					success: res => {
						let file = res.tempFiles[0];
						this.$core.uploadFile({
							filePath: file.path,
							success: (ret, response) => {
								this.info.logo = ret.data.url;
								this.$forceUpdate();
							}
						});
					}
				});
			},
			//公司地址
			bindCompanyAddress() {
				let page = this;
				let lat = this.info.lat
				let lng = this.info.lng
				if (lat && lng) {

					if (lat == '0.0000000' || lng == "0.0000000") {
						uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								lat = res.latitude;
								lng = res.longitude;
								page.$core.getChooseLocation({
									lat: lat,
									lng: lng
								}).then(ret => {
									page.info.address = ret.address;
									page.info.lat = ret.lat;
									page.info.lng = ret.lng;
								})
							}
						});
					} else {
						this.$core.getChooseLocation({
							lat: lat,
							lng: lng
						}).then(ret => {
							page.info.address = ret.address;
							page.info.lat = ret.lat;
							page.info.lng = ret.lng;
						})
					}

				} else {
					this.$core.getLatLng({
						success(res) {
							page.$core.getChooseLocation({
								lat: res.latitude,
								lng: res.longitude
							}).then(ret => {
								page.info.address = ret.address;
								page.info.lat = ret.lat;
								page.info.lng = ret.lng;
							})
						}
					})
				}
			},
			// 认证信息相关操作
			uploadLicense() {
				// if(![0,3].includes(parseInt(this.data.audit_status)))
				//   return;
				let page = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						let file = res.tempFiles[0];
						if (file.size > 10 * 1024 * 1024) {
							uni.showToast({
								title: '文件大小最多10M',
								icon: 'none'
							});
							return;
						}
						page.$core.uploadFile({
							filePath: file.path,
							success(ret, response) {
								page.info.license_img = ret.data.url;
								page.$forceUpdate();
							}
						})
					}
				});
			},
			bindPreviewCompany() {
				uni.navigateTo({
					url: '/pages/user/company_info?id=' + this.info.company_id
				});
			},
			onSinglepage(type) {
				uni.navigateTo({
					url: '/pages/public/singlepage?type=' + type
				})
			},
			// 继续完善按钮 - 进入第二步
			bindNext() {
				let data = this.getFormData();
				var rule = this.getValidationRules();

				// 验证表单
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				this.step = 2;
			},
			// 第一步提交
			bindSubmitStep1() {
				let data = this.getFormData();
				var rule = this.getValidationRules();

				// 验证表单
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}

				this.submitForm(data);
			},
			// 第二步提交
			bindSubmitStep2() {
				let data = this.getFormData();
				this.submitForm(data);
			},
			// 获取表单数据
			getFormData() {
				return {
					city_id: this.info.city_id,
					license_img: this.info.license_img,
					company_name: this.info.company_name,
					address: this.info.address,
					industry_category_id: this.info.industry_category_id,
					company_type_id: this.info.company_type_id,
					company_scale_id: this.info.company_scale_id,
					contact_person: this.info.contact_person,
					contact_phone: this.info.contact_phone,
					contact_email: this.info.contact_email,
					logo: this.info.logo
				};
			},
			// 获取验证规则
			getValidationRules() {
				return [{
						name: 'company_name',
						rules: ['require'],
						errorMsg: {
							require: '请输入企业名称'
						}
					},
					{
						name: 'industry_category_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择所属行业',
							gt: "请选择所属行业"
						}
					},
					{
						name: 'company_type_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择公司性质',
							gt: "请选择公司性质"
						}
					},
					{
						name: 'company_scale_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请选择公司规模',
							gt: '请选择公司规模'
						}
					},
					{
						name: 'contact_person',
						rules: ['require'],
						errorMsg: {
							require: '请输入联系人'
						}
					},
					{
						name: 'contact_phone',
						rules: ['require'],
						errorMsg: {
							require: '请输入联系电话'
						}
					},
					{
						name: 'contact_email',
						rules: ['require', 'email'],
						errorMsg: {
							require: '请输入邮箱',
							email: '请输入正确的邮箱地址'
						}
					},
					{
						name: 'address',
						rules: ['require'],
						errorMsg: {
							require: '请输入公司地址'
						}
					},
					{
						name: 'logo',
						rules: ['require'],
						errorMsg: {
							require: '请上传Logo'
						}
					},
					{
						name: 'license_img',
						rules: ['require'],
						errorMsg: {
							require: '请上传营业执照'
						}
					},
				];
			},
			// 提交表单
			submitForm(data) {
				let benefitIds = [];
				this.info.benefits.forEach(item => benefitIds.push(item.id));
				data.benefit_ids = benefitIds.join(',');
				data.intro = this.info.intro;
				data.environment_images = this.info.environment_images.length > 0 ? this.info.environment_images.join(',') : '';
				let userinfo = this.$core.getUserinfo();
				data.lat = this.info.lat;
				data.lng = this.info.lng;
				this.$core.post({
					url: 'xilujob.enterprise/audit',
					data: data,
					success: ret => {
						uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, ret.data.enterprise_info.info_complete);
						if (userinfo.group_model.audit_status == '0') {
							userinfo.group_model.audit_status = ret.data.audit_status;
							this.$core.setUserinfo(userinfo);
							uni.showModal({
								title: '提示',
								content: "尊敬的用户您已经进入审核阶段，选择继续发布职位或等待审核",
								showCancel: false,
								success() {
									// 提交成功后返回首页
									uni.reLaunch({
										url: '/pages/public/index'
									});
								}
							})
							return;
						}
						// 提交成功后返回首页
						uni.reLaunch({
							url: '/pages/public/index'
						});
					}
				});
			},
			bindPrev() {
				this.step = 1;
			},
			bindEditLabel() {
				uni.navigateTo({
					url: '/pages/company/show_label',
					events: {
						infoTransfer: data => {
							this.info.benefits = data.info.benefits;
						}
					},
					success: res => {
						res.eventChannel.emit('infoTransfer', {
							info: this.info
						});
					}
				});
			},
			bindEditIntro() {
				uni.navigateTo({
					url: '/pages/company/business_edit',
					events: {
						infoTransfer: data => {
							this.info.intro = data.info.intro;
						}
					},
					success: res => {
						res.eventChannel.emit('infoTransfer', {
							info: this.info
						});
					}
				});
			},
			bindEditEnvironmentImages() {
				uni.navigateTo({
					url: '/pages/company/environment',
					events: {
						infoTransfer: data => {
							this.info.environment_images = data.info.environment_images;
						}
					},
					success: res => {
						res.eventChannel.emit('infoTransfer', {
							info: this.info
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.progress_main {
		height: 35rpx;
		background-color: #F0F3F6;
		border-radius: 30rpx;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.progress_con {
		height: 100%;
		display: block;
		background-color: var(--primary);
		border-radius: 30rpx;
	}

	.info_main {
		padding: 20rpx 30rpx
	}

	.box1 {
		margin-bottom: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		font-size: 30rpx;
	}

	.box1 .logo {
		max-width: 150rpx;
	}

	.box2 {
		padding: 10rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.box2 .license_img {
		margin: 30rpx 0 20rpx;
		display: block;
		width: 188rpx;
		height: 188rpx;
	}

	.info_item {
		line-height: 100rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #F3F3F3;
		position: relative;
	}

	.info_item:last-of-type {
		border-bottom: 0;
	}

	.ptb50 {
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.upload_img image {
		width: 293rpx;
		height: 194rpx;
		display: block;
	}

	.upload_img>view {
		margin-right: 20rpx
	}


	/* company/enterprise_audit/enterprise_audit.wxss */
	.photo_img {
		width: 355rpx;
		height: 236rpx;
		display: block;
		margin: 0 auto
	}

	.photo_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.photo_main {
		padding-top: 85rpx;
		padding-bottom: 110rpx;
	}

	.photo_info {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 54rpx;
		border-bottom: 17rpx solid #F1F1F1
	}

	.attest_item input {
		text-align: right;
		height: 100rpx;
		line-height: 100rpx;
	}

	.attest_item {
		line-height: 100rpx;
	}

	.pr15 {
		padding-right: 15rpx;
	}

	.foot_btn {
		padding: 63rpx 30rpx;
	}

	.foot_btn button {
		margin-left: 0;
	}

	.resume_tit {
		font-size: 30rpx;
		color: #fff;
		background-color: var(--primary);
		text-align: center;
		line-height: 88rpx;
	}

	.link {
		color: #999;
		font-size: 26rpx;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #999;
		display: inline-block;
		vertical-align: middle;
	}

	.pageTitle {
		position: relative;
		z-index: 20;
		color: #000;
		padding-left: 30rpx;
		position: relative;
	}

	.container {
		position: relative;
		padding-bottom: 200rpx !important;
	}

	.page-head {
		z-index: 122;
		overflow: hidden;
		background-color: #fff;
	}

	.pageTitle .back {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}

	.pageTitle .back image {
		display: block;
		width: 22rpx;
		height: 34rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}


	.address_list {
		position: absolute;
		left: 0;
		right: 0;
		top: 100rpx;
		background-color: #fff;
		z-index: 1000;
		height: 700rpx;
		overflow-y: scroll;
	}

	.address_item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid #eee;
	}

	.page-foot .icon_check {
		margin-right: 5rpx;
		display: block;
		width: 36rpx;
		height: 36rpx;
	}

	.arrow-r {
		width: 10rpx;
		height: 22rpx;
		display: block;
		margin-left: 10rpx;
	}

	.btn4 {
		width: 330rpx;
		height: 82rpx;
		border-radius: 8rpx;
		border: 1px solid var(--primary);
		line-height: calc(82rpx - 2px);
		text-align: center;
		font-size: 30rpx;
		color: var(--primary);
	}

	.btn5 {
		width: 330rpx;
		height: 82rpx;
		background: var(--primary);
		border-radius: 8rpx;
		line-height: 82rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>